<template>
	<img src="../../images/1.jpg" alt="" class="myimg">
	<div class="box-fixed"></div>
	<div class="box"></div>
	<div class="box b1"></div>
	<button @click="add">操作</button>
	<div class="box2" @click="add">测试2</div>
	<div id="bg-change"></div>
	<div id="bg-change2"></div>
	<div id="a"></div>
	<div id="b"></div>
	<div id="myfix"></div>
</template>
<script>
export default {
	data() {
		return {
			a: 1,
			b: 2
		}
	},
	computed: {
		c() {
			return this.a + this.b;
		}
	},
	methods: {
		add() {
			console.log(`helloworld`);
		}
	},
	mounted() {
		console.log(`helloworld`);
	}
}
</script>
<style lang="scss">
.myimg {
	will-change: transform;
	width: 50px;
	height: 50px;
	border: 1px solid #000;
	transform: scale(2);
}

#a,
#b {
	will-change: transform;
	border: 1px solid #000;
}

#a {
	width: 100px;
	height: 100px;
}

#myfix {
	width: 100px;
	height: 100px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	border: 1px solid #000;
	z-index: -1;
}

#b {
	width: 10px;
	height: 10px;
	transform: scale(10);
}

#bg-change2 {
	width: 100px;
	height: 100px;
	background: red;
	transition: background 1s linear;

	&:hover {
		background: blue;
	}
}

#bg-change {
	width: 100px;
	height: 100px;
	background: red;
}

#bg-change {
	background-color: red;
	transition: opacity 0.4s;
	opacity: 1;
}

#bg-change:hover {
	opacity: 0;
}

.box-fixed {
	width: 100px;
	height: 100px;
	position: fixed;
	left: -9999px;
	top: 0;
	background: #fff;
	border: 1px solid #000;
}

.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	transform: translate(100px, 100px);
	animation: rotate 2s linear infinite;
	transform-style: preserve-3d;

	&.b1 {
		width: 10px;
		height: 10px;
		animation: rotate1 2s linear infinite;
		border: none;
		background: red;
		//background: red;
	}
}

.box2 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}

@keyframes rotate1 {
	from {
		transform: scale(10) rotateZ(0);
	}

	to {
		transform: scale(10) rotateZ(360deg);
	}
}

@keyframes rotate {
	from {
		transform: rotateZ(0);
	}

	to {
		transform: rotateZ(360deg);
	}
}
</style>